<template>
	<view class="container">
		<uni-nav-bar :title="status=='add' ? '入库':'入库详情'" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"
			:right-icon="status == 'add' ? 'plus':''" @clickRight="toAdd"></uni-nav-bar>
		<view class="content">
			<view class="list" v-if="status == 'detail'">
				<view class="item" v-for="(item,index) in goodsList" :key="item.id">
					<view class="line">
						<view class="left u-ellipsis" style="width: 60%;">
							{{ item.commodityName }}
						</view>
						<view class="right" style="width: 40%;">
							{{ item.barCode }}
						</view>
					</view>
					<view class="line">
						<view class="left">
							进货价：{{ item.purchasePrice }} 元
						</view>
						<view class="right">
							零售价：{{ item.storePrice }} 元
						</view>
					</view>
					<view class="line">
						<view class="left">
							入库数量：{{ item.num }}
						</view>
					</view>
				</view>
			</view>

			<view class="list" v-else :style="{paddingBottom: `calc(${safeAreaBottom}px + 80rpx)`}">
				<view class="item" v-for="(item,index) in addGoodsList" :key="item.id">
					<view class="line">
						<view class="left u-ellipsis" style="width: 60%;">
							{{ item.commodityName }}
						</view>
						<view class="right" style="width: 40%;">
							{{ item.barCode }}
						</view>
					</view>
					<view class="line">
						<view class="left">
							进货价：{{ item.buyingPrice }} 元
						</view>
						<view class="right">
							零售价：{{ item.storePrice }} 元
						</view>
					</view>
					<view class="line">
						<view class="left">
							入库数量：{{ item.num }} 
						</view>
						<view class="right" v-if="status == 'add'">
							<uni-icons type="compose" size="28" color="#2979ff" style="margin-right: 60rpx;" @click="toEdit(item)"></uni-icons>
							<uni-icons type="trash" size="28" color="#f54343" @click="delGoods(item)"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottomFix btn type-1 toLeft" v-if="status === 'add'" :style="{paddingBottom:safeAreaBottom + 'px'}" @click.stop="toSubmit">
			<text>确 认 提 交</text>
		</view>
	</view>
</template>

<script>
	import { reqSelfDetail,reqSelfInwarehouse } from '@/apis/goods';
	import { mapGetters } from 'vuex'
	export default {
		name: 'ZyDetail',
		data() {
			return {
				id: '',
				goodsList: [],
				status: ''
			}
		},
		onLoad(params) {
			this.id = params?.id;
			this.status = params?.status;
			if (this.id) {
				this.getNoDetail();
			}
		},
		computed: {
			...mapGetters('zyRk', ['addGoodsList']),
		},
		methods: {
			async getNoDetail() {
				let res = await reqSelfDetail({ id: this.id });
				if (res.code === 200) {
					this.goodsList = res.data;
				}
			},
			toAdd() {
				if(this.status !== 'add') return ;
				this.$navTo('./zyAddGoods');
			},
			toEdit(item) {
				this.$navTo('./zyAddGoods', { id: item.id });
			},
			delGoods(item) {
				let { id } = item;
				uni.showModal({
					content: '是否删除该入库商品?',
					success: async (res) => {
						if (res.confirm) {
							await this.$store.dispatch('zyRk/delZyGoods', { id });
							uni.utils.toast('删除成功', 'success');
						} else if (res.cancel) {
							console.log('取消');
						}
					}
				})
			},
			async toSubmit() {
				if(this.addGoodsList.length === 0) {
					uni.utils.toast('点击右上方添加商品');
					return ;
				}
				const detailsList = this.addGoodsList.map(item => ({
					storePrice:item.storePrice,
					barCode: item.barCode,
					purchasePrice: item.buyingPrice,
					num: item.num
				}))
				let res = await reqSelfInwarehouse({detailsList})
				if(res.code === 200) {
					uni.utils.toast('入库成功','success');
					this.$store.dispatch('zyRk/clearZyGoods');
					setTimeout(()=>{
						this.$navBack();
					},1000)
				}
			}
		},
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 20rpx;
		box-sizing: border-box;

		.list {
			.item {
				padding: 20rpx 24rpx;
				background-color: #fff;
				border-radius: 8rpx;
				margin-bottom: 20rpx;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				.line {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: $uni-font-size-small;
					color: #333;
					// margin-bottom: 10rpx;
					height: 50rpx;

					.left,
					.right {
						width: 50%;
					}

					.left {
						text-align: left;
					}

					.right {
						text-align: right;
					}
				}

				.btn {
					width: 120rpx !important;
					position: absolute;
					font-size: $uni-font-size-small;
					text-align: center;
					border-radius: 5rpx;
					height: 60rpx;
					box-sizing: border-box;
					line-height: 60rpx;
					bottom: 20rpx;
					right: 24rpx;
				}
			}
		}
	}

	.bottomFix {
		position: fixed;
		width: 100%;
		height: 80rpx;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: $uni-font-size-base;
	}
</style>